<script setup lang="ts">
import { getViewAllJson } from '/@/utils/transform';

const title = ref('');
const visible = ref(false);
const formJson = ref({});
const outputList = ref([]);

const showDialog = (name: string, datas: any) => {
	loading.value = true;
	title.value = name;
	outputList.value = datas;
	visible.value = true;
	getOutputInfo();
};
defineExpose({
	showDialog,
});

// 获取输出信息
const viewFormRef = ref();
const loading = ref(true);
const getOutputInfo = async () => {
	formJson.value = getViewAllJson(outputList.value);
	const formData: any = {};
	outputList.value.forEach((item: any) => {
		if (item.fieldValue && item.fieldValue.length > 0) {
			// 附件或枚举
			if (item.fieldValue[0].indexOf('{') !== -1) {
				const result = JSON.parse(item.fieldValue[0]);
				if (item.fieldCode === 'attachment') {
					// 附件
					formData[item.fieldCode] = result;
				} else if (Array.isArray(result)) {
					// 多选枚举
					formData[item.fieldCode] = result.map((i: any) => i.optionKey);
				} else {
					// 单选枚举
					formData[item.fieldCode] = result.optionKey;
				}
			} else {
				formData[item.fieldCode] = item.fieldValue[0];
			}
		}
	});
	loading.value = false;
	nextTick(() => {
		if (viewFormRef.value) {
			viewFormRef.value.setFormData(formData);
			nextTick(() => {
				viewFormRef.value.setReadMode();
			});
		}
	});
};

// 取消
const handleClose = () => {
	loading.value = true;
};
</script>
<template>
	<van-action-sheet v-model:show="visible" title="处置结果" :close-on-click-overlay="false" :before-close="handleClose">
		<div class="content" v-if="visible">
			<v-form-render ref="viewFormRef" :form-json="formJson" :mixMode="true" v-if="!loading"></v-form-render>
		</div>
	</van-action-sheet>
</template>
<style lang="scss" scoped>
:deep(.el-form-item) {
	.el-form-item__label {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: auto !important;
		min-height: 36px !important;
		line-height: 20px !important;
		text-align: left;
		word-wrap: break-word;
		white-space: pre-line;
	}

	.el-form-item__content {
		margin-bottom: 10px;
	}
}

.content {
	box-sizing: border-box;
	width: 100%;
	padding: 0 20px;
}
</style>
